<template>
  <!-- 左 -->
  <div class="com-flex-r">
    <!-- 图片 -->
    <div class="lef-img">
      <img :src="props.imgs" />
    </div>
    <!-- 左右 -->
    <div class="com-flex-c left-rig">
      <span style="color: #16d2f2; font-size: 22px"
        >使用率 <span> {{ props?.infoData?.[0] ?? "0%" }}</span></span
      >
      <div class="com-flex-r">
        <span style="font-size: 28px; color: #b5c4d0"
          >{{ props.CapacityTitle }}
          <span style="font-size: 30px; color: #ffffff">
            {{ props?.infoData?.[1] ?? 0 }}</span
          ></span
        >
        <span style="font-size: 22px; color: #5f9ea2; margin-left: 20px"
          >剩余
          <span style="font-size: 28px; color: #39e7ba">
            {{ props?.infoData?.[2] ?? 0 }}</span
          ></span
        >
      </div>
      <!-- 方块 -->
      <div class="com-flex-r">
        <div class="block" v-for="div in 12" :key="div"></div>
      </div>
      <div class="triangle"></div>
      <div class="" style="margin-left: 70px; margin-bottom: 10px">
        <span style="font-size: 22px; color: #4d77cd"
          >已用
          <span style="font-size: 28px; color: #578dfc">
            {{ props?.infoData?.[3] ?? 0 }}</span
          >
        </span>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  CapacityTitle: {
    type: String,
    default: "机柜容量",
  },
  imgs: {
    type: String,
    default: "/imgs/16.png",
  },
  infoData: {
    type: Array,
    default: () => [],
  },
});
</script>
<style lang="scss" scoped>
.box {
  .lef {
    width: 50%;
    margin-left: 27px;
    margin-top: 20px;
  }

  .block {
    height: 10px;
    width: 10px;
    background-color: #16d2f2;
    padding-right: 8px;
  }

  .triangle {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-bottom: 5px solid #16d2f2;
    margin-left: 100px;
    margin-top: -20px;
  }

  .lef-img {
    width: 164px;
    height: 270px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .left-rig {
    margin-top: 66px;
    margin-left: 22px;
    gap: 20px;
  }
}

.rig {
  width: 50%;
  background-color: red;
}
</style>
